import {Component, OnInit} from '@angular/core';
import {RequestService} from '../../services/request.service';
import {map, filter} from 'rxjs/operators';

@Component({
  selector: 'app-home2',
  templateUrl: './home2.component.html',
  styleUrls: ['./home2.component.css']
})
export class Home2Component implements OnInit {

  constructor(public request: RequestService) {
  }

  ngOnInit(): void {
    // 1. 同步方法
    const data = this.request.getData();
    console.log(data);

    // 2. callback获取异步数据

    this.request.getCallbackData(data => {
      console.log(data);
    });

    // 3.promise获取异步数据

    const promiseData = this.request.getPromiseData();

    promiseData.then((data) => {
      console.log(data);
    });

    // 4.rxjs获取异步方法里面的数据
    const rxjsData = this.request.getRxjsData();

    // rxjsData.subscribe((data) => {
    //   console.log(data);
    // });

    // 5.过一秒后撤回刚才的操作
    const stream = this.request.getRxjsData();

    const d = stream.subscribe((data) => {
      console.log(data);
    });

    setTimeout(() => {
      d.unsubscribe();    // 取消订阅
    }, 1000);

    // 6.Promise执行多次（没有这个能力）
    const intervalData = this.request.getPromiseIntervalData();

    intervalData.then(data => {
      console.log(data);
    });

    // 7.多次执行Rxjs
    // const streamInterval = this.request.getRxjsIntervalData();
    // streamInterval.subscribe((data) => {
    //   console.log(data);
    // });

    // 8.用工具方法对返回的数据进行处理
  //   const streamNum = this.request.getRxjsIntervaNum();
  //   streamNum.pipe(
  //     filter((value: number) => {
  //       if (value % 2 === 0) {
  //         return true;
  //       }
  //     })
  //   )
  //     .subscribe((data) => {
  //       console.log(data);
  //     });
  // }
    const streamNum = this.request.getRxjsIntervaNum();
    // streamNum.pipe(
    //     map((value: number) => {
    //       return value * value;
    //     })
    //   )
    //     .subscribe((data) => {
    //       console.log(data);
    //     });
    // }
    streamNum.pipe(
      filter((value: number) => {
        if (value % 2 === 0) {
          return true;
        }
      }),
      map((value: number) => {
        return value * value;
      })
    )
      .subscribe(data => {
        console.log(data);
      });
  }
}
